﻿@model List<Budget>

    <div class="text-end mt-2">
        <a class="btn btn-primary" asp-area="" asp-controller="Budget" asp-action="CreateBudget">Add a New Budget</a>
    </div>

<div class="text-center">
    <h4>MONTHLY BUDGET</h4>
</div>

@foreach (var budget in Model)
{
    <div class="row justify-content-center mb-4">
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@budget.CategoryName</h5>
                    <div class="d-flex justify-content-between">
                        <p class="card-text">
                            <small>Budget: £@(budget.Amount.ToString("0.00"))</small>
                        </p>
                        <p class="card-text">
                            <small>Spent: £@(Math.Abs(budget.TotalTransactionsAmount).ToString("0.00"))</small>
                        </p>
                    </div>
                    <div class="progress" style="height: 40px;">
                        @if (budget.Amount > 0)
                        {
                            var progress = (Math.Abs(budget.TotalTransactionsAmount) / Math.Abs(budget.Amount)) * 100;
                            <div class="progress-bar progress-bar-fill" role="progressbar" style="width: @progress.ToString("0.00")%" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100">
                                @progress.ToString("0.00")%
                            </div>
                        }
                        else
                        {
                            <div class="progress-bar progress-bar-fill" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                0%
                            </div>
                        }
                    </div>
                    <div class="card-body d-flex justify-content-end">
                        <a asp-controller="Budget" asp-action="EditBudget" asp-route-id="@budget.BudgetID" class="btn btn-primary btn-sm mx-1" title="Edit"><i class="bi bi-pencil-square"></i></a>
                        <a asp-controller="Budget" asp-action="DeleteBudget" asp-route-id="@budget.BudgetID" class="btn btn-danger btn-sm mx-1" title="Delete"><i class="bi bi-trash-fill"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
}
<br />
<style>
    .progress-bar {
        width: 100%;
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        line-height: 40px;
    }

    @*height: 30px;

    *@
    .progress-bar-fill {
        height: 100%;
        background-color: green;
        width: 0;
        transition: width 0.3s;
    }
</style>

<script>function updateProgressBarColor(progressElement) {
            const progress = parseFloat(progressElement.style.width);
            if (progress >= 100) {
                progressElement.style.backgroundColor = 'red';
            } else {
                progressElement.style.backgroundColor = 'green';
            }
        }

        const progressBars = document.querySelectorAll('.progress-bar-fill');
        progressBars.forEach(updateProgressBarColor);</script>
<br />